<template>
  <div class="menu">

    <label  v-for='(i,index) in list'>
<!--       {{mainNum(index)}}
      <i v-if='i.children' class="fa fa-circle listIcon"></i> -->
      <el-submenu :index="mainNum(index)" v-if='i.children'>
        <template slot="title" @click='tourl(i.path,index,i.query)'>
          <i class="icon iconfont" v-html='i.icon' v-if='i.icon'></i>
          <span slot="title" v-show='!hide'>{{i.name}}</span>
        </template>

        <jmenu :list='i.children' :findex="mainNum(index)"></jmenu>
      </el-submenu>

      <el-menu-item :index="mainNum(index)" v-else @click='tourl(i.path,index,i.query)'>
        <i class="icon iconfont" v-html='i.icon' v-if='i.icon'></i>
        <i class="fa fa-circle" v-else></i>
        <span slot="title" v-text='i.name' v-show='!hide'></span>
      </el-menu-item>
    </label>

  </div>
</template>

<script>
export default {
  name: 'jmenu',
  props:['list','findex','hide'],
  data() {
    return {}
  },
  computed:{
    mainIndex(){

      if(this.findex == void 0){
        return ''
      }else{
        return this.findex + '-';
      }

    }
  },
  methods: {
    tourl(url,index,query){
      tools.router.push({path:url,query:query || {}});
      tools.setSession('activeMenu',this.mainNum(index));
    },
    mainNum(num){
      num = String(num);
      if(this.findex){
        return this.findex + '-' + num
      }else{
        return num;
      }
    }
  }
}
</script>

<style scoped lang='scss'>
@import '../assets/scss/tool.scss';

@font-face {
  font-family: 'iconfont';  /* project id 765747 */
  src: url('http://at.alicdn.com/t/font_765747_v807qcdkrq9.eot');
  src: url('http://at.alicdn.com/t/font_765747_v807qcdkrq9.eot?#iefix') format('embedded-opentype'),
  url('http://at.alicdn.com/t/font_765747_v807qcdkrq9.woff') format('woff'),
  url('http://at.alicdn.com/t/font_765747_v807qcdkrq9.ttf') format('truetype'),
  url('http://at.alicdn.com/t/font_765747_v807qcdkrq9.svg#iconfont') format('svg');
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
  margin-right: 5px;
}
.menu{
  // background: #F8F5E9;
  .fa-circle{
    margin-right: 5px;
  }
}
</style>
